<template>
  <div class="module-wrapper">
    <!-- 中间预览 -->
    <div class="center-panel">
      <!-- 只有在 config 数据有效时才渲染 -->
      <TabBarPreview v-if="localConfig" :config="localConfig" />
    </div>
    <!-- 右侧配置 -->
    <div class="right-panel">
      <!-- 只有在 config 数据有效时才渲染 -->
      <TabBarConfig v-if="localConfig" v-model="localConfig" />
    </div>
  </div>
</template>

<script>
  import TabBarPreview from '../components/previews/TabBarPreview.vue';
  import TabBarConfig from '../components/configs/TabBarConfig.vue';

  export default {
    name: "TabBarModule",
    components: {
      TabBarPreview,
      TabBarConfig
    },
    props: {
      config: {
        type: Object, // 底部导航的数据结构是对象
        default: null
      }
    },
    data() {
      return {
        localConfig: {} // 本地副本是对象
      };
    },
    watch: {
      config: {
        handler(newValue) {
          this.localConfig = JSON.parse(JSON.stringify(newValue));
        },
        immediate: true,
        deep: true
      },
      localConfig: {
        handler(newValue) {
          this.$emit('update:config', newValue);
        },
        deep: true
      }
    }
    // computed: {
    //   configData: {
    //     get() {
    //       // 关键：如果 prop 为 null，则返回一个有效的默认对象结构
    //       if (!this.config) {
    //         return {
    //           style: {
    //             defaultColor: '#999999',
    //             selectedColor: '#409EFF'
    //           },
    //           items: []
    //         };
    //       }
    //       return this.config;
    //     },
    //     set(newValue) {
    //       this.$emit('update:config', newValue);
    //     }
    //   }
    // }
  }
</script>

<style lang="scss" scoped>
  .module-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
  }

  .center-panel {
    flex: 1;
    background: #f7f8fa;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    overflow-y: auto;
  }

  .right-panel {
    width: 450px;
    background: #fff;
    border-left: 1px solid #e8e8e8;
    padding: 20px;
    overflow-y: auto;
    flex-shrink: 0;
    padding-bottom: 80px;
  }
</style>
